<template>
  <el-dialog title="选择识别器" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="50%">
    <!--checkType 1 查看详情 2 编辑-->
    <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            header-cell-class-name="table-text-c"
            style="width: 100%"
            @row-click="rowClick">
      <el-table-column width="50">
        <template slot-scope="scope"><el-radio v-model="radio" :label="scope.row.id" class="radioCheckBox">{{scope.row.id}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column
              prop="name"
              label="识别器名称"
              width="120"
              align="center">
      </el-table-column>
      <el-table-column
              label="识别器范围"
              align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.scope==0">3m</span>
          <span v-if="scope.row.scope==1">5m</span>
          <span v-if="scope.row.scope==2">10m</span>
        </template>
      </el-table-column>
      <el-table-column
              prop="codeNumber"
              label="识别器组件个数"
              align="center">
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="userlistGet()" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    name: 'Dialog',
    props: ['visible', 'eidtOption', 'checkType'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          console.log('打开了')
          this.InitFn()
        }
      }
    },
    data () {
      return {
        radio: null,
        applyBox: null,
        dialogVisible: false,
        arryList: [],
        tableStyle: tableoption,
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
    },
    created () {
    },
    methods: {
      // 获取年段班级信息
      InitFn () {
        // 年段
        this.$fetch(api.admin_facility_index, {p: this.page.pageindex, corner_id: 0}).then((response) => {
          if (response.code === 0) {
            let array_ = []
            for (let i in response.list.data) {
              // let codeNumber = 0
              let codeNumber = response.list.data[i].code.split(',')
              response.list.data[i].codeNumber = codeNumber.length
              // response.list.data[i].codeNumber = response.list.data[i].code.length
              array_.push(response.list.data[i])
            }
            this.arryList = array_
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 行选中
      rowClick (option) {
        console.log('行点击:', option)
        this.radio = option.id
        this.applyBox = option
      },
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      userlistGet () {
        if (this.applyBox) {
          this.$emit('initFile', this.applyBox)
          this.dialogVisible = false
        } else {
          this.$message.error('请选择识别器')
        }
      }
    }
  }
</script>

